<template>
	<view class="page">
		<scroll-view class="scroll-view" scroll-y scroll-with-animation :scroll-top="top">
			<view style="padding: 30rpx 30rpx 240rpx;">
				<view class="message" :class="[item.userType]" v-for="(item,index) in list" :key="index">
					<image :src="item.avatar" v-if="item.userType === 'friend'" class="avatar" mode="widthFix"></image>
					<!-- 修改message页面的image样式 -->
					<view class="content" v-if="item.messageType === 'image'">
						<image :src="item.content" mode="widthFix" style="width: 200rpx;"></image>
					</view>
					<view class="content" v-else>
						{{ item.content }}
					</view>
					<image :src="item.avatar" v-if="item.userType === 'self'" class="avatar" mode="widthFix"></image>
				</view>
			</view>
		</scroll-view>
		<view class="tool">
			<input type="text" v-model="content" class="input" @confirm="send" placeholder="输入消息..." />
			<view class="button-group">
				<image src="http://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E6%B6%88%E6%81%AF/photo.png"
					mode="widthFix" class="icon" @click="chooseImage"></image>
				<button class="send-btn" @click="send" :disabled="!content.trim()">发送</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				content: '',
				list: [],
				top: 0
			};
		},
		onLoad(options) {
			// 解码参数
			const decodedName = options.name ? decodeURIComponent(options.name) : '';
			const decodedAvatar = options.avatar ? decodeURIComponent(options.avatar) : '';
			const decodedMsg = options.msg ? decodeURIComponent(options.msg) : '';

			// 保存好友信息到组件实例
			this._friendName = decodedName;
			this._friendAvatar = decodedAvatar;
			this._selfAvatar =
				'http://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E6%B6%88%E6%81%AF/avatar5.jpeg'; // 自己的头像

			// 初始化消息列表
			this.list = [{
				content: decodedMsg || '默认消息',
				userType: 'friend',
				avatar: decodedAvatar,
				messageType: 'text',
				timestamp: Date.now()
			}];
		},
		methods: {
			scrollToBottom() {
				setTimeout(() => {
					this.top = Math.random();
				}, 100);
			},

			send() {
				if (!this.content.trim()) return;
				const newMsg = {
					content: this.content,
					userType: 'self',
					avatar: this._selfAvatar,
					timestamp: Date.now(),
					messageType: 'text'
				};
				this.list.push(newMsg);
				this.content = '';
				this.scrollToBottom();

				// 模拟对方回复
				setTimeout(() => {
					const replyMsg = {
						content: this.getRandomReply(),
						userType: 'friend',
						avatar: this._friendAvatar,
						timestamp: Date.now()
					};
					this.list.push(replyMsg);
					this.scrollToBottom();
				}, 500);
			},

			chooseImage() {
				uni.chooseImage({
					success: (res) => {
						const newMsg = {
							content: res.tempFilePaths[0],
							userType: 'self',
							messageType: 'image',
							avatar: this._selfAvatar,
							timestamp: Date.now()
						};

						this.list.push(newMsg);
						this.scrollToBottom();

						// 模拟对方回复
						setTimeout(() => {
							const replyMsg = {
								content: this.getRandomReply(),
								userType: 'friend',
								avatar: this._friendAvatar,
								timestamp: Date.now()
							};

							this.list.push(replyMsg);
							this.scrollToBottom();
						}, 1500);
					}
				});
			},

			// 随机回复库
			getRandomReply() {
				const replies = [
					'这个主意不错！',
					'我需要考虑一下',
					'明天几点见面？',
					'你看这样如何？',
					'感谢你的建议'
				];
				return replies[Math.floor(Math.random() * replies.length)];
			}
		}
	};
</script>

<style lang="scss" scoped>
	.scroll-view {
		/* #ifdef H5 */
		height: calc(100vh - 44px);
		/* #endif */
		/* #ifndef H5 */
		height: 100vh;
		/* #endif */
		background: #eee;
		box-sizing: border-box;
	}

	.message {
		display: flex;
		align-items: flex-start;
		margin-bottom: 30rpx;

		.avatar {
			width: 80rpx;
			height: 80rpx;
			border-radius: 10rpx;
			margin-right: 30rpx;
		}

		.content {
			min-height: 80rpx;
			max-width: 60vw;
			box-sizing: border-box;
			font-size: 28rpx;
			line-height: 1.3;
			padding: 20rpx;
			border-radius: 10rpx;
			background: #fff;

			image {
				width: 200rpx;
			}
		}

		&.self {
			justify-content: flex-end;

			.avatar {
				margin: 0 0 0 30rpx;
			}

			.content {
				position: relative;

				&::after {
					position: absolute;
					content: '';
					width: 0;
					height: 0;
					border: 16rpx solid transparent;
					border-left: 16rpx solid #fff;
					right: -28rpx;
					top: 24rpx;
				}
			}
		}

		&.friend {
			.content {
				position: relative;

				&::after {
					position: absolute;
					content: '';
					width: 0;
					height: 0;
					border: 16rpx solid transparent;
					border-right: 16rpx solid #fff;
					left: -28rpx;
					top: 24rpx;
				}
			}
		}
	}

	.tool {
		position: fixed;
		width: 100%;
		min-height: 120rpx;
		left: 0;
		bottom: 0;
		background: #fff;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding: 20rpx 24rpx;
		padding-bottom: calc(20rpx + constant(safe-area-inset-bottom)/2) !important;
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom)/2) !important;
		gap: 20rpx;

		.input {
			flex: 1;
			background: #eee;
			border-radius: 10rpx;
			height: 70rpx;
			padding: 0 20rpx;
			box-sizing: border-box;
			font-size: 28rpx;
		}

		.button-group {
			display: flex;
			align-items: center;
			gap: 20rpx;

			.icon {
				width: 50rpx;
				height: 50rpx;
			}

			.send-btn {
				margin: 0;
				padding: 0 30rpx;
				height: 70rpx;
				line-height: 70rpx;
				font-size: 28rpx;
				background-color: #1aad19;
				color: white;
				border-radius: 10rpx;

				&[disabled] {
					background-color: #9EDD9D;
					opacity: 0.6;
				}
			}
		}
	}
</style>